// 引入React及其Hook
import React, { useState, useMemo, useEffect } from 'react';
// 引入侧边栏组件
import { Sidebar } from '@/components/dashboard/Sidebar';
// 引入主内容组件
import { MainContent } from '@/components/dashboard/MainContent';
// 引入派生数据 hooks
import { useCollectionsData } from '@/hooks/data';
// 引入活跃空间Store
import { useActiveSpaceStore } from '@/stores/activeSpace';
// 引入 UI 状态 Store
import { useCollectionsUIStore } from '@/stores/collectionsUI';
// 引入全局Toast通知Store
import { useToast } from '@/hooks/ui';
// 引入存储相关工具函数
import { saveCurrentWindowAsCollection } from '@/services';
// 引入工具函数（防抖/类名合并）
import { cn, debounce } from '@/lib/utils';

/**
 * Dashboard 页面组件（主界面：包含Sidebar + Toolbar + CollectionsGrid）
 * 职责：协调侧边栏、主内容区域的数据流和交互
 */
export const Dashboard: React.FC = () => {
    // 获取当前活跃空间ID（纯UI状态，使用number类型匹配后端API）
    const activeSpaceId = useActiveSpaceStore((state) => state.activeSpaceId);

    // 使用新的 TanStack Query 数据 hook
    const {
        isError,
        error: dataError,
        query,
    } = useCollectionsData(activeSpaceId);

    // UI 状态管理
    const searchQuery = useCollectionsUIStore((s) => s.searchQuery);
    const setSearchQuery = useCollectionsUIStore((s) => s.setSearchQuery);
    const isSaving = useCollectionsUIStore((s) => s.isSaving);
    const setIsSaving = useCollectionsUIStore((s) => s.setIsSaving);

    // 本地搜索输入状态（用于输入框受控）
    const [localSearchInput, setLocalSearchInput] = useState('');

    // 获取Toast通知实例
    const toast = useToast();

    // 创建稳定的防抖搜索函数实例，并在组件卸载时清理挂起任务
    const debouncedSearch = useMemo(() => debounce((query: string) => {
        setSearchQuery(query);
    }, 300), [setSearchQuery]);

    useEffect(() => {
        return () => debouncedSearch.cancel();
    }, [debouncedSearch]);

    // 处理搜索输入变化事件
    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const value = event.target.value;
        setLocalSearchInput(value);
        // 调用防抖包装函数
        debouncedSearch(value);
    };

    // 处理"保存当前窗口为集合"逻辑
    const handleAddCollection = async () => {
        // 检查是否有活跃空间
        if (!activeSpaceId) {
            toast.error('未选择工作空间');
            return;
        }

        // 设置保存中标志
        setIsSaving(true);
        try {
            // 调用保存函数并传入当前活跃空间ID
            saveCurrentWindowAsCollection(activeSpaceId, '', '仪表板于').then(r => {
                if (r.savedTabIds.length === 0) {
                    toast.info('当前窗口没有可保存的标签页');
                    return;
                }
                toast.success('已保存当前窗口');
            });
        } catch (error) {
            // 控制台输出错误详情
            console.error('保存集合失败:', error);
            // 显示失败提示
            toast.error('保存失败，请重试');
        } finally {
            // 结束保存中状态
            setIsSaving(false);
        }
    };

    // 若加载过程出现错误则渲染错误视图
    if (isError) {
        const errorMessage =
            dataError && typeof dataError === 'object' && 'message' in dataError
                ? String((dataError as {message?: string}).message ?? '未知错误')
                : '未知错误';
        // 返回错误页面结构
        return (
            // 外层容器：垂直水平居中
            <div className="min-h-screen bg-white flex items-center justify-center">
                {/* 内容容器：文本居中 */}
                <div className="text-center">
                    {/* 错误标题 */}
                    <div className="text-red-600 text-lg font-semibold mb-4">加载失败</div>
                    {/* 错误信息描述 */}
                    <p className="text-gray-500 mb-4">{errorMessage}</p>
                    {/* 重试按钮 */}
                    <button
                        onClick={() => query.refetch()}
                        className="px-4 py-2 bg-blue-600 text-white border-none rounded-md cursor-pointer hover:bg-blue-700 transition-colors"
                    >
                        重试
                    </button>
                </div>
            </div>
        );
    }

    // 渲染主界面结构
    return (
        // 根容器：添加 overflow-x-auto 允许在窗口过窄时横向滚动；仍保持 overflow-y-hidden 防止垂直滚动
        <div className="relative h-screen bg-white overflow-y-hidden overflow-x-auto">
            {/* 侧边栏组件：绝对定位叠放在左侧 */}
            <Sidebar
                value={localSearchInput}
                onSearchChange={handleSearchChange}
            />
            {/* 主内容外层：动态左边距 + 过渡动画 + 设置最小宽度(保证≥3列TabCard) */}
            <MainContainer>
                <MainContent
                    searchQuery={searchQuery}
                    isSaving={isSaving}
                    onAddCollection={handleAddCollection}
                />
            </MainContainer>
        </div>
    );
};

/**
 * 主容器组件
 * 职责：控制"首帧禁用过渡"逻辑，保持 Dashboard 组件简洁
 */
const MainContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [enableTransition, setEnableTransition] = useState(false);

    useEffect(() => {
        const id = requestAnimationFrame(() => setEnableTransition(true));
        return () => cancelAnimationFrame(id);
    }, []);

    return (
        <div
            className={cn(
                'main-container h-full min-w-[820px] ml-[var(--sidebar-offset,240px)]',
                enableTransition ? 'transition-[margin-left] duration-300 ease-in-out' : 'transition-none'
            )}
        >
            {children}
        </div>
    );
};
